<meta charset="UTF-8">
<style type = "text/css">
	#demo2 img{
		width: 100px; 
		height: 150px;
	}
	#demo2 .tp_div{
		position: relative;
		width: 100px;
		display: inline-block;
		margin: 0 10px 10px 0;
	}
	#demo2 .tp_div span{
		position: absolute;
		opacity: 0;
		top: 20px;
		left: 30px;
	}
	#demo2 .tp_div:hover span {
		opacity: 1;
		line-height: 100px;
	}
	#demo2 .tp_div:hover {
		opacity: 0.6;
		cursor: pointer;
	}
</style>
<div style="padding: 20px;">
	<h3 class="text-primary container-fluid"><span th:text="${record.type}"></span>详细信息
		<!-- <span th:if="${record.state == '申请中'}" class="j_bj" onclick="j_bj()">编辑</span> -->
	</h3>
	<hr >
	<div id="printpage">
		<form id="btn_tk" method="post">
			<div class="container-fluid" th:if="${record.type == '调课'}">
				<input type="hidden" name = "id" th:value="${record.id}">
				<div class="col-md-4" style=" padding: 0px 10px 20px 0px;">			
					<div class="input-group">
						<span class="input-group-addon">班级：</span>
						<input type="text" class="form-control" name="tbClass" readonly="readonly" th:value="${record.tbClass}">
					</div>
				</div>
				<div class="col-md-4" style=" padding: 0px 10px 20px 0px;">			
					<div class="input-group">
						<span class="input-group-addon">课程：</span>
						<input type="text" class="form-control" name="curriculum" readonly="readonly" th:value="${record.curriculum}">
					</div>
				</div>
				<div class="col-md-4" style=" padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">申请时间：</span>
						<input type="text" class="form-control" name="opplyTime" readonly="readonly" th:value="${record.opplyTime}">
					</div>
				</div>
				<div class="col-md-4" style=" padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">状态：</span>
						<input type="text" class="form-control" name="state" readonly="readonly" th:value="${record.state}">
					</div>
				</div>
				<div class="col-md-4" style=" padding: 0px 10px 20px 0px;">			
					<div class="input-group">
						<span class="input-group-addon">调课前节次：</span>
						<input type="text" class="form-control" name="section" readonly="readonly" th:value="${record.section}">
					</div>
				</div>
				<div class="col-md-4" style=" padding: 0px 10px 20px 0px;">			
					<div class="input-group">
						<span class="input-group-addon">调课前上课地点：</span>
						<input type="text" class="form-control" name="classroom" readonly="readonly" th:value="${record.classroom}">
					</div>
				</div>
				<div class="col-md-4" style=" padding: 0px 10px 20px 0px;">			
					<div class="input-group">
						<span class="input-group-addon">调课前上课日期：</span>
						<input type="text" class="form-control" name="suspendTime" readonly="readonly" th:value="${record.suspendTime}">
					</div>
				</div>
				<div th:if="${record.state != '已拒绝'}" class="col-md-4" style=" padding: 0px 10px 20px 0px;">			
					<div class="input-group">
						<span class="input-group-addon">调课后节次：</span>
						<input type="text" class="form-control" readonly="readonly" name="jc" th:value="${record.jc}">
					</div>
				</div>
				<div th:if="${record.state != '已拒绝'}" class="col-md-4" style=" padding: 0px 10px 20px 0px;">			
					<div class="input-group">
						<span class="input-group-addon">调课后上课地点：</span>
						<input type="text" readonly="readonly" class="form-control" name="address" th:value="${record.address}">
					</div>
				</div>
				<div th:if="${record.state != '已拒绝'}" class="col-md-4" style=" padding: 0px 10px 20px 0px;">			
					<div class="input-group">
						<span class="input-group-addon">调课后上课日期：</span>
						<input type="text" readonly="readonly" class="form-control" name="repairTime" th:value="${record.repairTime}">
					</div>
				</div>
				<div th:if="${record.state != '已拒绝'}" class="col-md-4" style=" padding: 0px 10px 20px 0px;">			
					<div class="input-group">
						<span class="input-group-addon">调课后上课老师：</span>
						<input type="text" readonly="readonly" class="form-control" name="teacher" th:value="${record.teacher}">
					</div>
				</div>
				<div th:if="${record.state == '已拒绝'}" class="col-md-4" style=" padding: 0px 10px 20px 0px;">			
					<div class="input-group">
						<span class="input-group-addon">调课后上课日期：</span>
						<input class="form-control" type="text" id="i_bksq_date" name="repairTime" th:value="${record.repairTime}" placeholder="请选择时间">
						<span class="glyphicon glyphicon-calendar form-control-feedback" style="margin-right: 10px;"></span>
					</div>
				</div>
				<div th:if="${record.state == '已拒绝'}" class="col-md-4" style=" padding: 0px 10px 20px 0px;">			
					<div class="input-group">
						<span class="input-group-addon">调课后节次：</span>
						<!-- <input type="text" class="form-control" readonly="readonly" name="tbClass" th:value="${record.jc}"> -->
						<select class="form-control" name="jc" id="i_bksq_jc">
							<option></option>
							<option th:selected="${record.jc eq '1-2'}">1-2</option>
							<option th:selected="${record.jc eq '3-4'}">3-4</option>
							<option th:selected="${record.jc eq '5-6'}">5-6</option>
							<option th:selected="${record.jc eq '7-8'}">7-8</option>
							<option th:selected="${record.jc eq '9-10'}">9-10</option>
						</select>
					</div>
				</div>
				<div th:if="${record.state == '已拒绝'}" class="col-md-4" style=" padding: 0px 10px 20px 0px;">			
					<div class="input-group">
						<span class="input-group-addon">调课后上课地点：</span>
						<select class="form-control" name="address" id="i_bksq_classroom"data-live-search="true">
							<option></option>
							<option th:each="c:${classroomlist}" th:text="${c.serialNumber}" th:selected="${c.serialNumber eq record.address}"></option>
						</select>
					</div>
				</div>
				
				<div th:if="${record.state == '已拒绝'}" class="col-md-4" style="z-index:2; padding: 0px 10px 20px 0px;">			
					<div class="input-group">
						<span class="input-group-addon">调课后上课老师：</span>
						<select class="form-control " name="teacher" id="i_bksq_teacher"data-live-search="true">
							<option></option>
							<option th:each="e:${teacherroom}"th:value="${e.username}" th:text="${e.name}" th:selected="${e.name eq record.teacher}"></option>
						</select>
					</div>
				</div>
				<div th:if="${record.state == '已拒绝'}" class="col-md-12" style="z-index:1; padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">部门意见：</span>
						<textarea class="form-control" rows="3" name="opinion" readonly="readonly" th:text="${record.opinion}"></textarea>
					</div>
				</div>
			</div>
		</form>
	
		<form id="btn_tk1" method="post">
			<div class="container-fluid" th:if="${record.type == '停课'}">
				<input type="hidden" name = "id" th:value="${record.id}">
				<input type="hidden" id="f_picture" name="picture" th:value="${record.tpId}">
				<div class="col-md-4" style=" padding: 0px 10px 20px 0px;">			
					<div class="input-group">
						<span class="input-group-addon">班级：</span>
						<input type="text" class="form-control" name="tbClass" readonly="readonly" th:value="${record.tbClass}">
					</div>
				</div>
				<div class="col-md-4" style=" padding: 0px 10px 20px 0px;">			
					<div class="input-group">
						<span class="input-group-addon">课程：</span>
						<input type="text" class="form-control" name="curriculum" readonly="readonly" th:value="${record.curriculum}">
					</div>
				</div>
				<div class="col-md-4" style=" padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">申请时间：</span>
						<input type="text" class="form-control" name="opplyTime" readonly="readonly" th:value="${record.opplyTime}">
					</div>
				</div>
				<div class="col-md-4" style=" padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">状态：</span>
						<input type="text" class="form-control" name="state" readonly="readonly" th:value="${record.state}">
					</div>
				</div>
				<div class="col-md-4" style=" padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">停课时间：</span>
						<input type="text" class="form-control" name="suspendTime" readonly="readonly" th:value="${record.suspendTime}">
					</div>
				</div>
				<div class="col-md-4" style=" padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">停课节次：</span>
						<input type="text" class="form-control" name="section" readonly="readonly" th:value="${record.section}">
					</div>
				</div>
				<div th:if="${record.state != '已拒绝'}" class="col-md-4" style=" padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">请假类型：</span>
						<input type="text" class="form-control" name="leaveType" readonly="readonly" th:value="${record.leaveType}">
					</div>
				</div>
				<div th:if="${record.state == '已拒绝'}" class="col-md-4" style=" padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">请假类型：</span>
						<!-- <input type="text" class="form-control" name="tbClass" readonly="readonly" th:value="${record.leaveType}"> -->
						<select class="form-control" name="leaveType">
							<option th:selected="${record.leaveType eq '公假'}">公假</option>
							<option th:selected="${record.leaveType eq '事假'}">事假</option>
							<option th:selected="${record.leaveType eq '病假'}">病假</option>
							<option th:selected="${record.leaveType eq '其他'}">其他</option>
						</select>
					</div>
				</div>
				<div th:if="${record.state != '已拒绝'}" class="col-md-12" style=" padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">请假理由：</span>
						<textarea class="form-control" rows="3" name="reason" readonly="readonly" th:text="${record.reason}"></textarea>
					</div>
				</div>
				<div th:if="${record.state == '已拒绝'}" class="col-md-12" style=" padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">请假理由：</span>
						<textarea class="form-control" rows="3" name="reason" th:text="${record.reason}"></textarea>
					</div>
				</div>
				<div th:if="${record.state == '已拒绝'}" class="col-md-12" style=" padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">部门意见：</span>
						<textarea class="form-control" rows="3" name="opinion" readonly="readonly" th:text="${record.opinion}"></textarea>
					</div>
				</div>
				<div th:if="${record.state != '已拒绝'}" class="col-md-12" style=" padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">佐证材料：</span>
						<img th:each="c:${picture}" alt="" th:src="@{/ttb/download(id=${c.id})}" width="300px" style="margin-right: 20px;">
					</div>
				</div>
				<div th:if="${record.state == '已拒绝'}" class="col-md-12 layui-upload" style="padding: 0px 10px 20px 0px;">
					<b>佐证材料：</b>
				  	<button type="button" class="layui-btn" id="test2">选择图片</button> 
				  	<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
				    	预览图：
				    	<div class="layui-upload-list" id = "demo2">
				    		<div class="tp_div" onclick="fun_2(this.id)" th:id="${c.id}" th:each="c:${picture}">
				    			<img alt="" th:src="@{/ttb/download(id=${c.id})}">
				    			<span>删除</span>
				    		</div>
				    	</div>
				 	</blockquote>
				</div>
			</div>
		</form>
	
		<form id="btn_bk" method="post">
			<div class="container-fluid" th:if="${record.type == '补课'}">
				<input type="hidden" name = "change" th:value="${record.id}">
				<div class="col-md-4" style=" padding: 0px 10px 20px 0px;">			
					<div class="input-group">
						<span class="input-group-addon">班级：</span>
						<input type="text" class="form-control" name="tbClass" readonly="readonly" th:value="${record.tbClass}">
					</div>
				</div>
				<div class="col-md-4" style=" padding: 0px 10px 20px 0px;">			
					<div class="input-group">
						<span class="input-group-addon">课程：</span>
						<input type="text" class="form-control" name="curriculum" readonly="readonly" th:value="${record.curriculum}">
					</div>
				</div>
				<div class="col-md-4" style=" padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">申请时间：</span>
						<input type="text" class="form-control" name="opplyTime" readonly="readonly" th:value="${record.opplyTime}">
					</div>
				</div>
				<div class="col-md-4" style=" padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">状态：</span>
						<input type="text" class="form-control" name="tbClass" readonly="readonly" th:value="${record.state}">
					</div>
				</div>
				<div th:if="${record.state != '已拒绝'}" class="col-md-4" style=" padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">补课节次：</span>
						<input type="text" class="form-control" name="tbClass" readonly="readonly" th:value="${record.jc}">
					</div>
				</div>
				<div th:if="${record.state != '已拒绝'}" class="col-md-4" style=" padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">补课时间：</span>
						<input type="text" class="form-control" name="tbClass" readonly="readonly" th:value="${record.repairTime}">
					</div>
				</div>
				<div th:if="${record.state != '已拒绝'}" class="col-md-4" style=" padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">补课老师：</span>
						<input type="text" class="form-control" name="tbClass" readonly="readonly" th:value="${record.teacher}">
					</div>
				</div>
				<div th:if="${record.state != '已拒绝'}" class="col-md-4" style=" padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">补课地点：</span>
						<input type="text" class="form-control" name="tbClass" readonly="readonly" th:value="${record.address}">
					</div>
				</div>
				<div th:if="${record.state == '已拒绝'}" class="col-md-4" style=" padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">补课时间：</span>
						<!-- <input type="text" class="form-control" name="tbClass" readonly="readonly" th:value="${record.repairTime}"> -->
						<input class="form-control" type="text" id="i_bksq_date" name="repairTime" th:value="${record.repairTime}" placeholder="请选择补课时间">
						<span class="glyphicon glyphicon-calendar form-control-feedback" style="margin-right: 10px;"></span>
					</div>
				</div>
				<div th:if="${record.state == '已拒绝'}" class="col-md-4" style=" padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">补课节次：</span>
						<!-- <input type="text" class="form-control" name="tbClass" readonly="readonly" th:value="${record.jc}"> -->
						<select class="form-control" name="jc" id="i_bksq_jc">
							<option th:selected="${record.jc eq '1-2'}">1-2</option>
							<option th:selected="${record.jc eq '3-4'}">3-4</option>
							<option th:selected="${record.jc eq '5-6'}">5-6</option>
							<option th:selected="${record.jc eq '7-8'}">7-8</option>
							<option th:selected="${record.jc eq '9-10'}">9-10</option>
						</select>
					</div>
				</div>
				
				<div th:if="${record.state == '已拒绝'}" class="col-md-4" style=" padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">补课老师：</span>
						<!-- <input type="text" class="form-control" name="tbClass" readonly="readonly" th:value="${record.teacher}"> -->
						<select class="form-control" name="teacher" id="i_bksq_teacher"data-live-search="true">
							<option th:each="e:${teacherroom}"th:value="${e.username}" th:text="${e.name}" th:selected="${e.name eq record.teacher}"></option>
						</select>
					</div>
				</div>
				<div th:if="${record.state == '已拒绝'}" class="col-md-4" style=" padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">补课地点：</span>
						<select class="form-control" name="address" id="i_bksq_classroom"data-live-search="true">
							<option th:each="c:${classroomlist}" th:text="${c.serialNumber}" th:selected="${c.serialNumber eq record.address}"></option>
						</select>
					</div>
				</div>
				<div th:if="${record.state == '已拒绝'}" class="col-md-12" style="z-index:0; padding: 0px 10px 20px 0px;">
					<div class="input-group">
						<span class="input-group-addon">部门意见：</span>
						<textarea class="form-control" rows="3" name="opinion" readonly="readonly" th:text="${record.opinion}"></textarea>
					</div>
				</div>
			</div>
		</form>
	</div>
	<br><hr >
	
	<div id="j_btn_foot" style="text-align: right; margin-right: 20px;">
		<button type="button" th:if="${record.state == '申请中'}" class="btn btn-info glyphicon glyphicon-repeat" th:value="${record.id}" onclick="j_cxsq(this.value)" > 撤销申请</button>
		<button type="button" th:if="${record.state == '已拒绝'}" class="btn btn-success glyphicon glyphicon-ok" th:value="${record.type}" id="zcsq" onclick="j_bc(this.value)"> 再次申请</button>
		<!-- <button type="button" class="btn btn-primary glyphicon glyphicon-print" onclick="javascript:window.printdiv()" > 打印</button> -->
		<button type="button" class="btn btn-danger glyphicon glyphicon-remove" onclick="g_apply()"> 关闭</button>	
	</div>
</div>

<script type="text/javascript">
	layui.use('upload', function(){
		var $ = layui.jquery
		,upload = layui.upload;
		//多图片上传
	  	upload.render({
		    elem: '#test2'
		    ,url: 'ttb/f_tk_savePicture'
		    ,multiple: true
		    ,before: function(obj){
		      	obj.preview(function(index, file, result){
		       	 	$('#demo2').append('<div onclick="fun_2(this.id)" class="tp_div"><img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img"><span>删除</span></div>')
		      	});
		    }
		    ,done: function(res){
		    	var f = $("#f_picture").val();
		    	if(f != ""){
			    	f = f+","+res.msg;
		    	}else{
		    		f = res.msg;
		    	}
		    	$("#demo2 .tp_div").last().attr("id",res.msg);
		    	$("#f_picture").val(f);
		    }
	  	});
	}); 
	
	function j_bc(str){
		if(str == "补课"){
			var data=$("#btn_bk").serialize();
			var jc=$("#i_bksq_jc").val();
			var repairTime=$("#i_bksq_date").val;
			if(!(jc=="")&&repairTime=="" || jc==""&&(!repairTime=="")){
				bootbox.alert("日期和节次要同时选择");
			}else{
				$.ajax({
				    type: 'post',
				    url: 'ttb/i_tjbksq',
				    data: data,
				    success: function(data) {
				    	bootbox.alert(data);
				    	if(data == "申请成功！"){
					    	$("#zcsq").attr('disabled', 'disabled');			    		
				    	}
				    },error:function(){  
				    	bootbox.alert(data);
		            }
				});				
			}
		}
		if(str == "停课"){
			var data=$("#btn_tk1").serialize();
			$.ajax({
			    type: 'post',
			    url: 'ttb/f_tk_saveRecord',
			    data: data,
			    success: function(data) {
			    	bootbox.alert(data.msg);
			    	if(data.msg == "申请成功！"){
				    	$("#zcsq").attr('disabled', 'disabled');			    		
			    	}
			    },error:function(data){
			    	bootbox.alert(data.msg);
			    }
			});
		}
		if(str == "调课"){
			var data=$("#btn_tk").serialize();
			var jc=$("#i_bksq_jc").val();
			var repairTime=$("#i_bksq_date").val();
			if(!(jc=="")&&repairTime=="" || jc==""&&(!repairTime=="")){
				bootbox.alert("日期和节次要同时选择");
			}else{
				$.ajax({
				    type: 'post',
				    url: 'ttb/g_tk_saveTeacherRecord',
				    data: data,
				    success: function(data) {
				    	bootbox.alert(data.msg);
				    	if(data.msg == "申请成功"){
					    	$("#zcsq").attr('disabled', 'disabled');			    		
				    	}
				    },error:function(data){
				    	bootbox.alert(data.msg);
				    }
				});
			}	
		}
	}
	$('#i_bksq_teacher').selectpicker({
		//width:'fit'
	});
	$('#i_bksq_classroom').selectpicker({
		//width:'fit'
	});
	laydate.render({
	  	elem: '#i_bksq_date',
	  	calendar: true,    //开启公历节日,标明节日
		min:minDate()
	});
	function minDate(){
	    var now = new Date();
	    return now.getFullYear()+"-" + (now.getMonth()+1) + "-" + now.getDate();
	}
	
	
	function fun_2(id){
		bootbox.confirm({
			title:'<span class="glyphicon glyphicon-question-sign"></span> 提示信息',
			message: '<h4>确定删除吗？</h4>',
			buttons: {
	            cancel: {
	                label: '<i class="glyphicon glyphicon-remove"></i> 取消'
	            },
	            confirm: {
	                label: '<i class="glyphicon glyphicon-ok"></i> 确定'
	            }
	        },
	        callback: function (result) {
	        	if(result==true){
	        		$.post('ttb/picture_remove',{id:id},function(data){
	        			bootbox.alert(data.msg);
	        			$("#"+id+" img").parent().remove();
	        			var tp_id = $("#f_picture").val();
	        			var tp_str = tp_id.split(",");
	        			var tp_sun = "";
	        			for(var i = 0; i < tp_str.length; i++){
	        				if(tp_str[i] != id){
	        					tp_sun += tp_str[i]+",";
	        				}
	        			}
	        			var tp_sun = tp_sun.substring(0, tp_sun.length-1); 
	        			$("#f_picture").val(tp_sun);
	        		});
	        	}
	        }
		});
	}
</script>
